<template>
  <div class="box03">
    <div class="box03-row">
      <div class="box03-row-item">
        <echartCompt
          class="box03-chart"
          v-model="chartOption"
          :pieTimer="3000"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      lineRowData: [],
      dqData:["北\n京","天\n津","河\n北","山\n西","内\n蒙\n古","辽\n宁","大\n连","吉\n林","黑\n龙\n江","上\n海",
              "江\n苏","浙\n江","宁\n波","安\n徽","福\n建","厦\n门","江\n西","山\n东","青\n岛","河\n南","湖\n北","湖\n南",
              "广\n东","深\n圳","广\n西","海\n南","重\n庆","四\n川","贵\n州","云\n南","西\n藏","陕\n西","甘\n肃","青\n海","宁\n夏","新\n疆",],
      dqJEData: ["50012","40005","30023","30017","30007","30003","20033","20015","20010","20001","10034",
                "10032","10030","10028","10026","10025","10024","10022","10020","10018","10016","10014","10011",
                "10008","10004","10002","1035","1031","1029","1027","1021","1019","1013","1009","1006","1000",],
    //   dqZbData:[ "10","12","14","54","56","58","60","62","64","66","16","18","20","22","24","26","28","30",
    //              "32","68","70","72","74","76","78","80","34","36","38","40","42","44","46","48","50","52",]
    };
  },
  computed: {
    chartOption() {
      let _this = this;
      let color = [
        "#26babf",
        "#fc8452",
        "#FFC722",
        "#886EFF",
        "#008DEC",
        "#114C90",
        "#00BFA5",
      ];
      let xData = [],
        hsData = [],
        jeData = [];
      this.lineRowData.forEach((row) => {
        xData.push(
          row.TJYF.slice(0, 5) +
            "\n" +
            row.TJYF.slice(5, 10) +
            "\n" +
            row.TJYF.slice(10)
        );
        hsData.push(row.JFHS);
        jeData.push((row.JFJE / 100000000).toFixed(2));
      });
      return {
        color: color,
        tooltip: {
          trigger: "axis",
          extraCssText: "text-align:left;",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          show: true,
          data: ["规模", "增幅"],
          textStyle: {
            color: "#ffffff",
            fontSize: 22,
          },
          left: 200,

          itemWidth: this.getSize(25),
          itemHeight: this.getSize(14),
          itemGap: this.getSize(10),
        },
        grid: {
          left: this.getSize(20),
          right: this.getSize(20),
          bottom: 0,
          top: 40,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            //data: xData,
            data: this.dqData,
            nameTextStyle: {
              color: "#fff",
              fontSize: 22,
            },
            axisLabel: {
              color: "#fff",
              fontSize: 22,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿元",
            nameGap: 10,
            nameTextStyle: {
              color: "#fff",
              fontSize: 22,
            },
            axisLabel: {
              color: "#fff",
              fontSize: 22,
            },
            splitLine: {
              show: false,
            },
          }
        ],
        series: [
          {
            name: "规模",
            type: "bar",
            barWidth: this.getSize(22),

            //data: jeData,
            data:this.dqJEData,
          },
        //   {
        //     name: "增幅",
        //     type: "line",
        //     label: {
        //       show: false,
        //       formatter(params) {
        //         return `${_this.digtalFormatUnit(params.value, "户")}`;
        //       },
        //       color: "#fff",
        //       fontSize: this.getSize(14),
        //     },
        //     yAxisIndex: 1,
        //     //data: hsData,
        //     data: _this.dqZbData,
        //   },
        ],
      };
    },
  },
  mounted() {
    //this.init();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.box03 {
  height: 100%;
  &-row {
    height: 100%;
    display: flex;
    &-item {
      flex: 1;
      height: 100%;
    }
  }
  &-chart {
    height: calc(100% - 20px);
  }
}
</style>
